<template>
  <el-container>
    <el-header class="flex bg-sky-500 justify-between items-center text-white">
      <p>
        学生管理系统
      </p>
      <p>
        <nuxt-link to="/">
          <span>返回首页</span>
        </nuxt-link>
        |
        {{$userStore.userName}}
      </p>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="activeName"
          :default-openeds="openMenu"
          class="el-menu-vertical-demo"
        >
          <template v-for="(item, index) in menuListData">
            <el-sub-menu v-if="item.children.length" :index="item.en_name" :key="index">
              <template #title>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item
                v-for="(child, indexs) in item.children"
                :index="child.en_name"
                :key="indexs">
                <nuxt-link :to="'/school/' + item.en_name + '/'+ child.en_name">
                  {{child.name}}
                </nuxt-link>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="item.en_name">
                <nuxt-link :to="'/school/' + item.en_name">
                  <span>{{item.name}}</span>
                </nuxt-link>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-main>
        <slot/>
      </el-main>
    </el-container>
  </el-container>
  
</template>
<script setup>
const { $schoolStore } = useNuxtApp()

const route = useRoute()
const activeName = ref('student')
const routeSplit = route.name.split('-')
activeName.value = routeSplit.pop()
const openMenu = [routeSplit[1]]

const menuListData = $schoolStore.menuListData
console.log('----------',menuListData)
// const getListData = async () => {
//   await $schoolStore.getListData().then(res => {
//     menuListData.value = res
//   })
// }
// onMounted(() => {
//   if($schoolStore.menuListData){
//     menuListData.value = $schoolStore.menuListData
//   }else{
//     console.log(333)
//     getListData()
//   }
// })

// const {data: menuListData} = useAsyncData('menuList', () => 
//   $schoolStore.getListData().then(res => res.data)
// )
</script>
<style scoped>
.el-menu-vertical-demo{
  height: 100%
}
</style>